<!--
  * 品牌下拉选择框
-->
<template>
  <a-select v-model:value="selectValue" :style="`width: ${width}`" @mouseenter="query" :placeholder="props.placeholder" :showSearch="true" :allowClear="true" optionFilterProp="label" @change="onChange" @inputKeyDown="onSubmit">
    <a-select-option v-for="item in list" :key="item.id" :value="item.id" :label="item.brand_name">
      {{ item.brand_name }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { searchApi } from '@/api/search/search-api'
import { errorSentry } from '@/lib/error-sentry'
import { useAppConfigStore } from '@/store/modules/app-store'

// =========== 属性定义 和 事件方法暴露 =============

const props = defineProps({
  value: [Number, Array],
  placeholder: {
    type: String,
    default: '请选择'
  },
  width: {
    type: String,
    default: '100%'
  },
  size: {
    type: String,
    default: useAppConfigStore().$state.componentSize
  }
})

const emit = defineEmits(['update:value', 'change', 'submit'])

// =========== 查询数据 =============

// 列表数据
const list = ref([])
async function query() {
  try {
    let params = {}
    let resp = await searchApi.brandList(params)
    list.value = resp.data
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  }
}
onMounted(query)

// =========== 选择 监听、事件 =============

const selectValue = ref(props.value)
watch(
  () => props.value,
  (newValue) => {
    selectValue.value = newValue
  }
)

function onChange(value) {
  emit('update:value', value)
  emit('change', value)
}

function onSubmit(e) {
  if (e.key === 'Enter') {
    emit('submit', selectValue.value)
  }
}
</script>
